<template>
  <div>
    <!-- 开始使用，上部分 -->
    <div class="begin-use">
      <h1>欢迎使用EvinChan在线协同编辑图片系统</h1>
      <div>
        <el-button type="primary" @click="useSys">开始使用</el-button>
        <el-button type="primary">了解我们</el-button>
      </div>
    </div>
    <!-- 什么是摄影 -->
    <div class="content-top">
      <h1>什么是在线协同编辑图片系统</h1>
      <div class="content-top-title">
        <span
          >摄影传输系统，是一套服务于大型活动的即时上传下载的系统，用于与用户和摄影团队之间交互传输的一套系统，致力于打造更便捷更快速的图片交付体验。</span
        >
      </div>
      <div class="content-top-content">
        <div class="content-top-content-left">
          <div>
            <div>
              <span>
                <i class="fa fa-book" />
              </span>
            </div>
            <div>
              <h3>快速交付</h3>
              <div><span>用户无需使用qq、百度云等传统的交付工具，也无需使用u盘，光盘等传统存储介质。</span></div>
            </div>
          </div>
          <div>
            <div>
              <span>
                <i class="fa fa-refresh" />
              </span>
            </div>
            <div>
              <h3>上手简单</h3>
              <div><span>界面简洁，功能简单明了，上手毫无难度</span></div>
            </div>
          </div>
          <div>
            <div>
              <span>
                <i class="el-icon-menu" />
              </span>
            </div>
            <div>
              <h3>无限拓展</h3>
              <div><span>系统有无限拓展的可能性。</span></div>
            </div>
          </div>
        </div>
        <div class="content-top-content-right" >
          <!-- <div style="width:100%;overflow:hidden;"> -->
            <img src="../assets/welcome/content.png" alt=""/>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <!-- 图片即时传输技术线上平台 -->
    <div>
      <h1 align="center">图片即时传输技术线上平台</h1>
      <div>
        <img src="../assets/welcome/intruduce.png" alt="" width="100%"/>
      </div>
    </div>
    <!-- 致力于行业新高度 -->
    <div class="content-bottom">
      <h3>致力引领行业新高度，创造更多奇迹。</h3>
      <el-button type="primary"  @click="useSys">马上使用</el-button>
    </div>
    <!-- 底部 -->
    <div>
     <img src="../assets/welcome/footer.png" alt="" width="100%"/>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      title="请老板选择您要登陆的平台"
      :visible.sync="dialogVisible"
      width="50%">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-link href="/user"  type="primary"><i class="el-icon-view el-icon-s-custom"></i>客户端</el-link>
        </el-col>
        <el-col :span="8">
          <el-link href="/worker"  type="success"><i class="el-icon-view el-icon-s-shop"></i>员工端</el-link>
        </el-col>
        <el-col :span="8">
          <el-link  href="/backstage" type="warning"><i class="el-icon-view el-icon-s-marketing"></i>后台系统</el-link>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="sumit">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userData: [],
      dialogVisible: false
    }
  },
  created() {},
  mounted() {},
  methods: {
    async useSys() {
      // console.log('点了一下跳转')
      const { data: resuser } = await this.$http.get('users', {
        params: { query: window.sessionStorage.getItem('username'),
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 10 }
      })
      if (resuser.meta.status !== 200) {
        return this.$message.error('获取用户信息失败')
      }
      this.userData = resuser.data.users
      // console.log(this.userData, '=====userData')
      if (this.userData[0].role_name === '老板' || this.userData[0].role_name === '超级管理员') {
        this.dialogVisible = true // 检测到是老板登陆询问是否登陆后台
      }
      if (this.userData[0].role_name === '客户') {
        this.$router.push('/user')
      }
      if (
        this.userData[0].role_name === '照片审核主管' ||
        this.userData[0].role_name === '摄影组长' ||
        this.userData[0].role_name === '摄影师' ||
        this.userData[0].role_name === '照片后期管理员') {
        this.$router.push('/worker')
      }
      if (
        this.userData[0].role_name === '总经理' ||
        this.userData[0].role_name === '人事经理' ||
        this.userData[0].role_name === '市场经理' ||
        this.userData[0].role_name === '行政助理' ||
        this.userData[0].role_name === 'CFO') {
        this.$router.push('/backstage')
      }
    }
  }
}
</script>
<style lang="less" scoped>
// 上部分
.begin-use {
  width: 100%;
  height: 751px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: url('../assets/welcome/index-back.png') no-repeat;
  background-size:100% 100%;
  h1 {
    font-size: 40px;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
  }
  .el-button {
    width: 200px;
    background-color: rgba(61, 114, 245, 0);
    border: 1px solid #fff;
  }
  .el-button:nth-child(1) {
    background-color: rgba(61, 114, 245, 1);
    border: 1px solid rgba(61, 114, 245, 1);
  }
}
// 中部分
.content-top {
  width: 100%;
  display: flex;
  // justify-content: center;
  flex-direction: column;
  // align-items: center;
  background: rgb(245, 248, 255);
  h1 {
    width: 100%;
    text-align: center;
    padding-top: 30px 0;
  }
  .content-top-title {
    text-align: left;
    font-size: 12px;
    color: #999;
    width: 40%;
    margin-left: 80px;
  }
  .content-top-content {
    width: 100%;
    // margin-left: 50px;
    display: flex;
    .content-top-content-left {
      width: 40%;
      // margin-right: 20px;
      // padding-right:30px;
      display: flex;
      flex-direction: column;
      div {
        display: flex;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        div:nth-child(1) {
          width: 10%;
          // background:rgb(109, 106, 106);
          margin-right: 10px;
          text-align: center;
          // background: red;
          i {
            padding: 10px;
            border-radius: 50%;
            border: 3px solid rgb(61,114,245);
            color:rgb(61,114,245);
          }
        }
        div:nth-child(2) {
          width: 80%;
          // background: green;
          // display: flex;
          flex-direction: column;
          // justify-content: center;
          // align-items: center;
          h3{
            margin:0;
            padding:0
          }
          div{
            color:#999;
            font-size:12px;
          }
        }
      }
    }
    .content-top-content-right {
      width: 60%;
      overflow: hidden;
    }
  }
}
// 致力于行业新高度
.content-bottom{
  width:100%;
  height:373px;
  color:#fff;
  display:flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background:url('../assets/welcome/content-bottom.png') no-repeat;
  background-size:100% 100%;
  .el-button{
    width: 200px;
    background-color: rgba(61, 114, 245, 1);
    border: 1px solid rgba(61, 114, 245, 1);
  }
}
</style>
